<!--
 * hi-overlay - 遮罩层
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-overlay" :class="_classes" :style="_styles" @tap="handleClick" v-if="show">
        <slot></slot>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["close"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 内容对齐方式
        classes.push(`hi-overlay--${_props.align}`);

        // 是否显示
        if (_props.show) classes.push("hi-overlay--show");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 背景
        if (_props.bg) styles.push(`--hi-overlay-background: ${_props.bg}`);

        // 层级
        if (_props.index) styles.push(`--hi-overlay-z-index: ${_props.index}`);

        return styles;
    });

    /**
     * 点击事件
     */
    function handleClick() {
        _emits("close");
    }
</script>

<style lang="scss" scoped>
    .hi-overlay {
        position: var(--hi-overlay-position, fixed);
        width: var(--hi-overlay-width, 100%);
        height: var(--hi-overlay-height, 100%);
        top: var(--hi-overlay-top, 0);
        left: var(--hi-overlay-left, 0);
        right: var(--hi-overlay-right, 0);
        bottom: var(--hi-overlay-bottom, 0);
        background: var(--hi-overlay-background, var(--hi-background-overlay));
        opacity: 0;
        z-index: var(--hi-overlay-z-index, var(--hi-index-upper));
        display: var(--hi-overlay-display, flex);
        flex-direction: var(--hi-overlay-flex-direction, column);
        align-items: var(--hi-overlay-align-items, center);
        justify-content: var(--hi-overlay-justify-content, center);
        overflow: var(--hi-overlay-overflow, hidden);
        animation-duration: var(--hi-overlay-animation-duration, 300ms);
        animation-timing-function: var(--hi-overlay-animation-timing-function, linear);
        animation-fill-mode: var(--hi-overlay-animation-fill-mode, forwards);

        &--show {
            animation-name: hi-overlay-animate;
        }

        &--left-top {
            align-items: flex-start;
            justify-content: flex-start;
        }

        &--left-center {
            align-items: flex-start;
            justify-content: center;
        }

        &--left-bottom {
            align-items: flex-start;
            justify-content: flex-end;
        }

        &--center-top {
            align-items: center;
            justify-content: flex-start;
        }

        &--center-center {
            align-items: center;
            justify-content: center;
        }

        &--center-bottom {
            align-items: center;
            justify-content: flex-end;
        }

        &--right-top {
            align-items: flex-end;
            justify-content: flex-start;
        }

        &--right-center {
            align-items: flex-end;
            justify-content: center;
        }

        &--right-bottom {
            align-items: flex-end;
            justify-content: flex-end;
        }

        @keyframes hi-overlay-animate {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    }
</style>
